<!-- 头部 -->
<template>
  <div id="iot-header">
    <div class="center-left">
      <div class="display-flex ai-center">
        <img width="24px" class="mr-12" src="@/assets/images/titles/time.png" />
        <span class="fs-18" style="color: #76b6ff"
          >{{ time }} <span class="pl-14">{{ day }}</span>
        </span>
      </div>
    </div>
    <div class="center-title">物联网平台数据统计</div>
    <div class="center-right">
      <div class="display-flex ai-center cursor-pointer">
        <el-image
          class="mr-12"
          style="width: 30px; height: 30px"
          :src="fullscreen ? efs : fs"
          fit="fill"
          @click="onFullScreen"
        ></el-image>
        <el-dropdown>
          <div
            class="display-flex fd-column jc-space-between"
            style="line-height: 15px"
          >
            <span class="fs-12" style="color: #01c4f9; height: 20px"
              >欢迎您</span
            >
            <span class="fs-16 color-white" style="height: 20px">{{
              username
            }}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push({ path: '/admin' })"
              >管理后台</el-dropdown-item
            >
            <el-dropdown-item @click.native="loginOut"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import fs from "@/assets/images/iot/full-screen.png";
import efs from "@/assets/images/iot/exit-full-screen.png";
import screenfull from "screenfull";
export default {
  name: "DisplayHeader",
  components: {},
  data() {
    return {
      fs,
      efs,
      time: this.$moment().format("YYYY/MM/DD HH:mm:ss"),
      fullscreen: true,
    };
  },
  computed: {
    ...mapState({
      // username: (state) => state.userInfo.name || "",
    }),
    username() {
      return "管理员";
    },
    day() {
      const day = Number(this.$moment(this.time).format("e"));
      switch (day) {
        case 0:
          return "星期一";
        case 1:
          return "星期二";
        case 2:
          return "星期三";
        case 3:
          return "星期四";
        case 4:
          return "星期五";
        case 5:
          return "星期六";
        case 6:
          return "星期日";
        default:
          return "星期";
      }
    },
  },
  async mounted() {
    try {
      this.timer = setInterval(() => {
        this.time = this.$moment().format("YYYY/MM/DD HH:mm:ss");
      }, 1000);

      const element = document.documentElement; // 设置后就是我们平时的整个页面全屏效果
      if (document.webkitIsFullScreen && element.requestFullscreen()) {
        try {
          const res = await element.requestFullscreen();
          console.log("res", res);
        } catch (err) {
          console.log("err", err);
        }
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
      // 解决按f11时图标不变化的问题
      window.addEventListener("keydown", this.KeyDown, true); // 监听按键事件
    } catch (err) {
      console.log("err", err);
    }
  },
  methods: {
    KeyDown(event) {
      if (event.keyCode === 122) {
        // 禁用f11
        event.returnValue = false;
        // 触发全屏的按钮
        this.onFullScreen();
      }
    },
    //
    onFullScreen() {
      this.$nextTick(() => {
        if (!screenfull.isEnabled) {
          this.$message.warning("您的浏览器不支持全屏，请更换浏览器再试~");
          return false;
        }
        screenfull.toggle();
        screenfull.onchange(() => {
          this.fullscreen = screenfull.isFullscreen;
        });
      });
    },
    // 监听是否全屏状态
    onresize() {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      const winFlag = window.innerHeight === window.screen.height;
      // 利用window全屏标识来判断 -- IE无效
      const isFull = window.fullScreen || document.webkitIsFullScreen;

      if (isFull === undefined) {
        this.fullscreen = winFlag;
      } else {
        this.fullscreen = winFlag || isFull;
      }
    },
    /**
     * 退出登录
     */
    loginOut() {
      this.$confirm("你确认要退出登录吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.location.href = "/auth_login";
          setTimeout(() => {
            this.$store
              .dispatch(
                "SetCachedViews",
                this.cachedViews.filter((item) => item === "Home")
              )
              .then(() => {
                this.$store.commit("SET_USER_INFO", {});
                this.$store.commit("SET_TOKEN", "");
                this.$cookies.remove("token");
              });
          }, 500);
        })
        .catch(() => {});
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss">
#iot-header {
  position: relative;
  width: 100%;
  height: 100px;
  line-height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;

  .center-left {
    position: absolute;
    left: 4%;
    // top: 5px;
  }

  .center-title {
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    font-size: 35px;
    font-weight: bold;
    background-image: linear-gradient(to top, #1183d6, #52ebf5, #1183d6);
    -webkit-background-clip: text;
    color: transparent;
  }

  .center-right {
    position: absolute;
    right: 4%;
    // top: 5px;
  }
}
</style>
